<template>
  <div class="car-add-container">
<!--    <div class="image-upload">-->
<!--      <el-avatar-->
<!--          style="width: 150px;height: 150px;"-->
<!--          :src="form.avatarImg?form.avatarImg:'http://121.41.164.80:9090/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMToxOTAwMC9jZHovY2hhcmdlVXNlciUzQWF2YXRhciUzQWltZy0wNThlYTZlMy1mYTcxLTQyMjUtYmVhMC1kYjMxYjUxMmY3NTE5NjdhYTYyNjFhN2Y0NzI0YmNhYTJkNjMxNTY2NzhmMi5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1MTUVSMDdEQzNCQk4wNEozRlgxWSUyRjIwMjQxMjIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIyM1QxMTQ0MTdaJlgtQW16LUV4cGlyZXM9NDMyMDAmWC1BbXotU2VjdXJpdHktVG9rZW49ZXlKaGJHY2lPaUpJVXpVeE1pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SmhZMk5sYzNOTFpYa2lPaUpNVFVWU01EZEVRek5DUWs0d05Fb3pSbGd4V1NJc0ltVjRjQ0k2TVRjek5EazRNekl5T0N3aWNHRnlaVzUwSWpvaWJXbHVhVzloWkcxcGJpSjkuOWM0eGNOUUFHSTZlcllYaUItS1JWdXZVN1hSTm5UVExOMGx4azY2V3BXc1YzUF9yUUNDZUZ3bWEtZm1MRHhiUTNmMmI1bU1yeGNoWl91V1hHVTBsQ3cmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnZlcnNpb25JZD1udWxsJlgtQW16LVNpZ25hdHVyZT00MjFjMzhjNTcxZThhMzQyODk1N2Y3ODQ5ZDZjNTUxZGQyMDA3NTIwNjhlODRhNWQyZGM0NTVmN2U5OTUyZThm'"-->
<!--          class="blur-avatar"-->
<!--      />-->
<!--      <div style="position: absolute;top: 130px;left: 110px;">-->
<!--        <van-uploader :after-read="onRead">-->
<!--          <van-icon name="photograph" class="custom-icon"/>-->
<!--        </van-uploader>-->
<!--      </div>-->
<!--    </div>-->
    <div class="form-group">
      <label for="licensePlate">车牌号</label>
      <select v-model="form.licensePlateId" size="small" style="width: 240px">
        <option v-for="item in options" :key="item.id" :label="item.capital" :value="item.id"/>
      </select>
      <input type="text" v-model="form.carNo" placeholder="请输入车牌号码" />
    </div>
    <div class="form-group">
      <label for="brand">品牌</label>
      <select v-model="form.carBrandId" size="small" style="width: 240px">
        <option v-for="item in option1" :key="item.id" :label="item.brand" :value="item.id"/>
      </select>
    </div>
    <div class="form-group">
      <label for="fuelType">燃料</label>
      <select v-model="form.fuelTypeId" size="small" style="width: 240px">
        <option v-for="item in option2" :key="item.id" :label="item.fuelType" :value="item.id"/>
      </select>
    </div>
    <div class="form-group">
      <label for="displacement">排量</label>
      <select v-model="form.displacementId" size="small" style="width: 240px">
        <option v-for="item in option3" :key="item.id" :label="item.displacement" :value="item.id"/>
      </select>
    </div>
    <div class="form-group">
      <label for="batteryType">电池类型</label>
      <select v-model="form.batteryCapacityId" size="small" style="width: 240px">
        <option v-for="item in option4" :key="item.id" :label="item.battery" :value="item.id"/>
      </select>
    </div>
    <div class="form-group">
      <label for="voltage">额定电压</label>
      <input type="text" v-model="form.voltage" placeholder="请输入额定电压" />
    </div>
    <div class="form-group">
      <label for="capacity">电池容量</label>
      <input type="text" v-model="form.capacity" placeholder="请输入电池容量" />
    </div>
    <div class="form-group">
      <label for="range">续航里程</label>
      <input type="text" v-model="form.range" placeholder="请输入续航里程" />
    </div>
    <div class="form-group">
      <label for="chassisNumber">车架号</label>
      <input type="text" v-model="form.vehicleIdentifyNo" placeholder="请输入车架号码" />
    </div>
    <div class="form-group">
      <label for="maxSpeed">最高车速</label>
      <input type="text" v-model="form.maxSpeed" placeholder="请输入最高车速" />
    </div>
    <div class="form-group">
      <label for="accelerationTime">加速时间</label>
      <input type="text" v-model="form.accelerationTime" placeholder="请输入加速时间" />
    </div>
    <div class="form-group">
      <label for="modelParameters">车型参数</label>
      <input type="text" v-model="form.modelParameters" placeholder="请输入车型参数" />
    </div>
    <div class="form-group">
      <label for="energyConsumption">能耗说明</label>
      <input type="text" v-model="form.energyConsumptionDesc" placeholder="请输入能耗说明" />
    </div>
    <div class="form-group">
      <label for="otherInfo">其他说明</label>
      <input type="text" v-model="form.otherDesc" placeholder="请输入其他说明" />
    </div>
    <div class="button-container">
      <button class="cancel-button" @click="fanHui()">取消</button>
      <button class="save-button" @click="saveCar()">保存</button>
    </div>
  </div>
</template>

<script setup>
import {ElMessage} from "element-plus";
import { ref } from 'vue'
import {
  addCar,
  getBatteryType,
  getCarBrand,
  getCarPlate,
  getDisplacement,
  getFuelType,
  updateAvatarImgJs
} from "@/api/myCar";

const form = ref({
  avatarImg:'',
  carNo:'',
  fuelTypeId:'',
  licensePlateId:'',
  carBrandId:'',
  displacementId:'',
  batteryCapacityId:'',
  voltage:'',
  capacity:'',
  range:'',
  vehicleIdentifyNo:'',
  maxSpeed:'',
  accelerationTime: '',
  modelParameters: '',
  energyConsumptionDesc: '',
  otherDesc: '',
})

// 处理文件的方法

function onRead(file) {
  const formData = new FormData();
  formData.append('file', file.file);
  updateAvatarImgJs(formData).then(res=>{
    if(res.data.code == 200000){
      console.log(res.data.errorMessage)
      form.value.avatarImg =res.data.errorMessage
      ElMessage.success("上传成功")
    }else {
      ElMessage.error("上传失败")
    }
  })
}
function saveCar() {
  console.log(form.value)
  addCar(form.value).then(res => {
    if (res.data.code == 200000){
      ElMessage.success("添加成功")
      form.value = {}
      window.location.href = "/my/car"
    }else {
      ElMessage.error("添加失败")
    }
  })
}

// 获取车牌照的省市
const options = ref();
function getOptions() {
  getCarPlate().then(res => {
    if (res.data.code == 200000){
      options.value = res.data.data
      console.log(res.data.data)
    }else {
      console.log(res.data.msg)
    }
  })
}
getOptions()
// 获取品牌
const option1 = ref();
function getOption1() {
  getCarBrand().then(res => {
    if (res.data.code == 200000){
      option1.value = res.data.data
      console.log(res.data.data)
    }else {
      console.log(res.data.msg)
    }
  })
}
getOption1()
// 获取燃料类型
const option2 = ref();
function getOption2() {
  getFuelType().then(res => {
    if (res.data.code == 200000){
      option2.value = res.data.data
      console.log(res.data.data)
    }else {
      console.log(res.data.msg)
    }
  })
}
getOption2()
// 获取排量类型
const option3 = ref();
function getOption3() {
  getDisplacement().then(res => {
    if (res.data.code == 200000){
      option3.value = res.data.data
      console.log(res.data.data)
    }else {
      console.log(res.data.msg)
    }
  })
}
getOption3()
// 获取电池类型
const option4 = ref();
function getOption4() {
  getBatteryType().then(res => {
    if (res.data.code == 200000){
      option4.value = res.data.data
      console.log(res.data.data)
    }else {
      console.log(res.data.msg)
    }
  })
}
getOption4()
//返回
function fanHui() {
  window.location.href = "/my/car"
}
</script>

<style scoped>
.car-add-container {
  width: 90%;
  max-width: 600px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 50px auto;
}

.image-upload {
  margin-bottom: 20px;
}

.image-upload input[type="file"] {
  display: none;
}

.image-upload label {
  display: block;
  width: 100%;
  height: 100px;
  border: 1px dashed #ccc;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.cancel-button,
.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
}

.cancel-button {
  background-color: #e74c3c;
  color: white;
}

.save-button {
  background-color: #3498db;
  color: white;
}
</style>